<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加文章</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 导航条开始 -->
{% include 'common/_nav.html' %}
<!-- 导航条结束 -->

<div class="container">
    <div class="row">
        <div style="margin-top: 100px; margin-bottom: 200px">
            <form action="/apps/index/article/add_do" method="post" id="addArticleForm">
                {% csrf_token %}
                <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" class="form-control" id="title" placeholder="请输入标题" name="title">
                </div>
                <div class="form-group">
                    <label for="info">简介</label>
                    <input type="text" class="form-control" id="info" placeholder="请输入简介" name="info">
                </div>
                <div class="form-group">
                    <label for="content">内容</label>
                    <textarea class="form-control" rows="3" id="content" name="content"
                              placeholder="请添加文章内容"></textarea>
                </div>
                <button type="submit" class="btn btn-danger">立即添加</button>
            </form>
        </div>
    </div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <!-- 底部开始 -->
    <div class="footer" style="text-align: center; color: white; padding: 10px;">
        <p>理想国真惠玩-张大鹏 2020年12月17日-至今</p>
        <p>备案号：京ICP 6666666</p>
    </div>
    <!-- 底部结束 -->
</nav>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 富文本编辑器 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/iceuinet/iceEditor/src/iceEditor.min.js"></script>
<!-- 解决xss攻击 -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-xss/0.3.3/xss.min.js"></script>
<script>
    //第一步：创建实例化对象
    var e = new ice.editor('content');

    //第二步：配置图片或附件上传提交表单的路径
    //如果你的项目使用的php开发，可直接使用upload.php文件
    //其它的编程语言需要你单独处理，后期我会放出.net java等语言代码
    //具体与你平常处理multipart/form-data类型的表单一样
    //唯一需要注意的就是：处理表单成功后要返回json格式字符串，不能包含其它多余的信息：
    //url：文件的地址
    //name：文件的名称（包含后缀）
    //error：上传成功为0，其它为错误信息，将以弹窗形式提醒用户
    //例如批量上传了两张图片：
    //[
    //	{url:'/upload/img/153444.jpg', name:'153444.jpg', error:0},
    //	{url:'/upload/img/153445.jpg', name:'153445.jpg', error:'禁止该文件类型上传'}
    //]
    // e.uploadUrl="/iceEditor/src/upload.php";

    //第三步：配置菜单（默认加载全部，无需配置）
    e.menu = [
        'backColor',                 //字体背景颜色
        'fontSize',                  //字体大小
        'foreColor',                 //字体颜色
        'bold',                      //粗体
        'italic',                    //斜体
        'underline',                 //下划线
        'strikeThrough',             //删除线
        'justifyLeft',               //左对齐
        'justifyCenter',             //居中对齐
        'justifyRight',              //右对齐
        'indent',                    //增加缩进
        'outdent',                   //减少缩进
        'insertOrderedList',         //有序列表
        'insertUnorderedList',       //无序列表
        'superscript',               //上标
        'subscript',                 //下标
        'createLink',                //创建连接
        'unlink',                    //取消连接
        'hr',                        //水平线
        'table',                     //表格
        'files',                     //附件
        'music',                     //音乐
        'video',                     //视频
        'insertImage',               //图片
        'removeFormat',              //格式化样式
        'code',                      //源码
        'line'                       //菜单分割线
    ];

    //第四步：创建
    e.create();

    let editor = e;
    $("#addArticleForm").submit(function (e) { //uploadVideoForm为表单名称
        // 阻止默认提交
        e.preventDefault()
        // 作者
        let author = getCookie('username')
        // 标题
        let title = $("#title").val()
        // 简介
        let info = $("#info").val()
        // 内容
        let content = filterXSS(editor.getHTML());

        // 解决ajax提交时csrf验证的问题
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });

        console.log(content); //过滤后的安全数据

        // 使用ajax提交到后台
        let url = '{% url 'article:add_ajax' %}'
        $.post(url, {author, title, info, content}, function (data) {
            // 如果成功：跳转到首页
            if (data.status === 200) {
                window.location.href = '/'
            }
        })
    });
</script>
</body>
</html>